<template>
  <div>
    <p>eat: {{obj.hobby.eat}}</p>
    <button @click="obj.hobby.eat = '🍜'">update</button>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const obj = ref({
      hobby: {
        eat: '西瓜',
      },
    })

    // !解决方式 1：开启深度监听
    watch(obj, () => {
      console.log('触发~~')
    }, {
      deep: true
    })

    return {
      obj
    }
  }
}
</script>

<style lang="scss" scoped></style>